<template>
	<div class="popup-list table-theme">
		<head-title title="营销--提问列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="status" @roleType="stateType"></tabs-view>
					<select-view
						:option-list="orderbyList"
						:value="order_by"
						placeholder="排序"
						type="order_by"
						@value="setSelectValue"
					>
					</select-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="List">
				<el-table-column label="序号" align="center" prop="ask_id"></el-table-column>
				<el-table-column label="商品id" align="center" prop="goods[0].goods_id"></el-table-column>
				<el-table-column label="商品名称" align="center" prop="goods[0].goods_name"></el-table-column>
				<el-table-column label="商品主图" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.goods[0].image_middle"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="用户ID" align="center" prop="user.user_id"></el-table-column>
				<el-table-column label="用户头像" align="center" prop="">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.user.heard_img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="用户名" align="center" prop="user.nickname"></el-table-column>
				<el-table-column label="提问" align="center" prop="content"></el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.ask_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="sort"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="220">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="addAnswer(scope.row.ask_id,scope.row.goods_id,scope.row.content)">回答</el-button>
						<el-button type="primary" size="mini" @click="seeAnswer(scope.row.ask_id,scope.row.content)">查看</el-button>
						<el-button type="danger" size="mini" @click="delAnswer(scope.row.ask_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<!-- 回答提问弹框 -->
		<el-dialog :title="title" :visible.sync="answerDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="answerForm" :rules="answerFormRules" ref="answerForm" label-width="120px">
				<el-form-item label="回答:" prop="content">
					<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="answerForm.content"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="answerDialog = false">取 消</el-button>
				<el-button type="primary" v-if="is_submit">提交中..</el-button>
				<el-button type="primary" @click="confirmClick('answerForm')" v-else>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import answerList from '@/components/layer-dialog/answer_list.vue';
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			SelectView,
			TabsView
		},
		data() {
			return {
				title:'',
				answerDialog: false,
				answerForm: {
					ask_id: '',
					goods_id: '',
					content: ''
				},
				answerFormRules: {
					content: [{
						required: true,
						message: '请输入内容'
					}]
				},
				order_by: 'add_time',
				status: 0,
				orderbyList: [{
						value: 'add_time',
						label: '时间排序'
					},
					{
						value: 'sort',
						label: '序号排序'
					}
				],
				searchOption: [{
						value: 0,
						label: '商品ID'
					},
					{
						value: 1,
						label: '用户ID'
					},
					{
						value: 2,
						label: '问答ID'
					}
				],
				selectContent: '', // 分类搜索平输入框的值
				classSelect: '', // 分类搜索
				multipleSelection: [],
				List: [], // 列表
				total: 0,
				page: 0,
				classifyList: ['上架','下架','审核中'],
				is_submit:false
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status+1,
					order_by: this.order_by
				};

				if (this.classSelect === 0) data.goods_id = this.selectContent;
				if (this.classSelect === 1) data.user_id = this.selectContent;
				if (this.classSelect === 2) data.ask_id = this.selectContent;

				this.List = []
				this.$http(this.$ApiList.AskList, data).then(res => {
					this.List = res.datas;
					this.total = res.counts;
				});
			},
			stateType(status) {
				this.status = status;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.classSelect = ''
				this.init()
			},
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 上下架
			upDown(e, ask_id) {
				let data = {
					status: e,
					ask_id: ask_id,
				};
				this.$http(this.$ApiList.AskUp, data).then(res => {
					this.$layer.msg(res.datas);
					this.init();
				});
			},
			seeAnswer(ask_id, content) {
				this.$layer.iframe({
					title: content,
					maxmin: true,
					area: ['70%', '60%'],
					content: {
						content: answerList, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							ask_id: ask_id
						} //props
					}
				});
			},
			addAnswer(ask_id, goods_id,content) {
				this.title = content
				this.answerForm.ask_id = ask_id
				this.answerForm.goods_id = goods_id
				this.answerForm.content = ''
				this.answerDialog = true
				this.$nextTick(() => {
					this.$refs.answerForm.clearValidate();
				});
			},
			delAnswer(ask_id) {
				this.$confirm('此操作将永久删除该提问, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.$http(this.$ApiList.AskDelate, {ask_id:ask_id}).then(res => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.init(this.page);
						});
					})
					.catch(() => {});
			},
			//提交
			confirmClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.is_submit = true;
						this.$http(this.$ApiList.AddAnswer, this.answerForm).then(res => {
							this.$layer.msg(res.datas);
							this.answerDialog = false;
							this.init(this.page);
							const timer = setTimeout(()=>{
								this.is_submit = false;
							},300);
							this.$once('hook:beforeDestroy',()=>{
								clearTimeout(timer);
							})

						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'order_by':
						this.order_by = value
						break;
				
					default:
						break;
				}
				this.init()
			}

		},
		created() {
			this.init();
		},
	};
</script>
<style lang="scss">
	.popup-list {
		

	}
</style>
